<template>
  <div class="user_main">
    <div class="user_header"></div>
    <div class="user_form">
      <!-- <MainForm @currentChange="currentChange" @reset="onreset" /> -->
    </div>
    <div class="user_content">
      <div class="user_table">
        <el-scrollbar>
          <el-table
            v-loading="loading"
            :data="userData"
            border
            @row-click="rowClick"
            style="width: 100%; height: calc(100% - 100px)"
          >
            <el-table-column
              prop="sequence"
              :label="$t('flowDefine.table.sequence')"
              align="center"
              width="50px"
            >
              <template #default="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="username"
              :label="$t('flowTask.userTable.logInAccount')"
              align="center"
            />
            <el-table-column
              prop="sequence"
              :label="$t('flowTask.userTable.userNickName')"
              align="center"
            />
            <el-table-column
              prop="cname"
              :label="$t('flowTask.userTable.employeesName')"
              align="center"
            />
            <el-table-column
              prop="sequence"
              :label="$t('flowTask.userTable.institutions')"
              align="center"
            />
            <el-table-column
              prop="sequence"
              :label="$t('flowTask.userTable.company')"
              align="center"
            />
            <el-table-column
              prop="phone"
              :label="$t('flowTask.userTable.mobilePhone')"
              align="center"
            />
            <el-table-column
              prop="sequence"
              :label="$t('flowTask.userTable.updateTime')"
              align="center"
            />
            <el-table-column
              prop="sequence"
              :label="$t('flowTask.userTable.status')"
              align="center"
            />
          </el-table>
        </el-scrollbar>
        <el-pagination
          background
          @prev-click.stop="currentChange"
          @next-click.stop="currentChange"
          @current-change="currentChange"
          layout="prev, pager, next"
          :total="page.total"
          :page-size="15"
        >
        </el-pagination>
      </div>
      <div class="user_right">
        <MainRight />
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import MainForm from './main-form.vue'
import MainRight from './right.vue'
import { requestUserList } from '@/api/bpmnApi'
export default {
  name: 'user_main',
  inject: ['rowClick'],
  components: {
    MainForm,
    MainRight,
  },
  data() {
    return {
      loading:false,
      value: true,
      procDefId: null,
      suspensionState: 1,
      userData: [],
      item: {},
      page: {
        total: 0,
        current: 1,
      },
      status: { 1: '已启动', 2: '已挂起' },
      rules: {
        flowName: [
          {
            min: 0,
            max: 10,
            message: this.$t('validate.lengthWarning', [0, 10]),
            trigger: 'blur',
          },
        ],
        flowKey: [
          {
            min: 0,
            max: 10,
            message: this.$t('validate.lengthWarning', [0, 10]),
            trigger: 'blur',
          },
        ],
      },
    }
  },
  computed: {
    ...mapState({
      treeData: (state) => state.flowClassifyStore.treeData,
      FlowPageData: (state) => state.flowDefineStore.FlowPageData,
      form: (state) => state.flowDefineStore.form,
    }),
  },
  mounted() {
    this.getFlowData(1)
  },
  methods: {
    ...mapActions('flowDefineStore', [
      'getFlowDownload',
      'performDeleteByFlowId',
      'performSuspendAllById',
      'getFlowDefineList',
      'reset',
    ]),
    clear() {
      this.userList.length = 0
    },

    /**
     *  重置条件
     *
     * @return {*}
     */
    async onreset() {
      await this.reset()
      await this.getFlowData(1)
    },
    /**
     *  获取列表
     *
     * @return {*}
     */
    currentChange(Num) {
      this.getFlowData(Number(Num))
    },
    /**
     *  获取定义分页数据
     *
     * @return {*}
     */
    async getFlowData(Num) {
      this.loading = true
      let rst = await requestUserList({ current: Num, size: 15 })
      this.loading = false
      rst = rst.data
      this.userData = rst?.data.records
      this.page.total = rst.data.total
      // this._info(rst.code, {
      //   success: [
      //     this.$t("flowTask.flowData", [
      //       this.$t("button.search"),
      //       this.$t("flowDefine.title"),
      //     ]),
      //   ],
      //   error: [this.$t("flowTask.flowData")],
      // });
    },
  },
}
</script>
<style lang="scss">
body .el-popconfirm__main {
  width: 300px;
}
</style>
<style lang="scss" scoped>
.user_main {
  background: #fff;
  display: flex;
  flex-direction: column;
  height: calc(100%);
  width: 100%;
  padding-left: 10px;
  .user_header {
    height: 40px;
  }
  .user_content {
    height: 100%;
    display: flex;
    overflow: auto;
    justify-content: space-between;
    & > .user_table {
      height: 100%;
      flex: 1;
    }
    & > .user_right {
      height: 100%;
    }
  }
  /deep/ .el-pagination {
    position: absolute;
    bottom: 20px;
    left: 50%;
  }
  .user_form .el-input {
    width: 100px;
  }
  .user_form {
    padding: 10px 0;
  }
  .user_operation {
    display: flex;
    justify-content: space-around;
    align-items: center;
    & > div {
      margin-right: 5px;
    }
  }
  .user_operations {
    display: flex;
    justify-content: space-around;
    align-items: center;
    & > i {
      font-size: 20px;
      color: #4f78da;
      cursor: pointer;
    }
  }
}
</style>
<style>
.user_form .el-input {
  width: 120px;
}
</style>
